<template>
    <HTable :data="cameraList" :total="cameraCount" :pageSize="pageSize.size" :fields="cameraFields"
        @pageChangeHandle="pageChangeHandle" @handleEdit="handleEdit" @handleDelete="handleDelete" editText="编辑"
        deleteText="删除"></HTable>
</template>

<script lang="ts" setup>
import HTable from "@/components/ElementPlusWrapper/table/HTable.vue"
import { computed, ref, watch } from "vue"
import { useStore } from "vuex"

const store = useStore()
const cameraList = computed(() => store.state.admin.cameraManagement.cameraList)
const pageSize = computed(() => store.state.admin.cameraManagement.cameraListPageAndSize);
const cameraFields = computed(() => store.state.admin.cameraManagement.cameraFields);
const cameraCount = computed(() => store.state.admin.cameraManagement.cameraCount);

const pageChangeHandle = (page: number) => {
    store.commit('admin/cameraManagement/_getAndUpdateCameraList', {
        page: page || store.getters['admin/cameraMangement/getPage'],
        pageSize: store.getters['admin/cameraMangement/getSize']
    })
}

const handleEdit = (index?: number, row?: any) => {
    store.commit('admin/cameraManagement/_setState', { path: 'cameraForm', value: Object.assign({}, row) })
    store.commit('admin/cameraManagement/_setState', { path: 'cameraFormComponent.formStatus', value: '编辑' })
}

const handleDelete = (index: number, row: any) => {
    store.dispatch("admin/cameraManagement/deleteCamera", { camera: row, index });
}

</script>